<template>
    <div v-show="flag" @click="toTop">
        返回<br>
        顶部
    </div>
</template>
<script>
import scrollTo from "../plugins/scrollTo";
export default{
    data(){
        return{
            flag:false
        }
    },
    mounted(){
        this.init();
        window.addEventListener("scroll",()=>{
            this.init();
        })
    },
    watch:{
        "$route"(){
            this.init();
        }
    },
    methods:{
        init(){
            var st=document.body.scrollTop||document.documentElement.scrollTop;
            this.flag=st>800;
        },
        toTop(){
            scrollTo()
        }
    }
}
</script>
<style scoped>
    div{
        position: fixed;
        right:100px;
        bottom:100px;
        background: purple;
        border-radius: 5px;
        padding:10px;
        text-align: center;
        line-height: 20px;
        color:white;
        width:46px;
        transition: all .3s;
        cursor: pointer;
        opacity: 0.8;
    }
    div:hover{
        opacity: 1;
    }
</style>